<template>
  <div ref="chartRef" :style="{ height, width }" class="data-report-pie"></div>
</template>

<script lang="ts" setup>
  import { PropType, ref, Ref, onMounted, computed } from 'vue'
  import { useECharts } from '@/hooks/web/useECharts'

  const props = defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: 'calc(100vh - 78px)',
    },
    params:{
      type: Object as PropType<any>,
      default: () => {
        return {}
      }
    }
  })
  const { text, color, data, orient} = props.params
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)

  const option = {
    tooltip: {
      trigger: 'item',
      confine: true,
      formatter(params) {
        let tip = ''
        if (params) {
          let value = params.data
          tip += `<div class="color-#333 formatter-title">${params.marker}${value.name}</div>`
            tip += `
              <div class="formatter-div">
                <span>当前</span>
                <span class="percentage">${value.percentage}</span>
                <span class="people">${value.value}人</span>
              </div>
              <div class="formatter-div">
                <span>目标</span>
                <span class="percentage">${value.percentage2}</span>
                <span class="people">${value.value2}人</span>
              </div>`
        }
        return tip
      },
    },
    legend: {
      orient: 'vertical',
      height: data.length > 4 ? 80 : 'auto' ,
      top: 30,
      right: 10,
      bottom: 20,
      icon: 'square',
      bordeRadius: 2,
      itemWidth: 12,
      itemHeight: 12,
      formatter:  function(name:string){
        let percentage = ''
        for (let i = 0, l = data.length; i < l; i++) {
          const item = data[i]
          if (item.name == name) {
            percentage = item.percentage
          }
        }
        return '{a|'+name+'}{b|'+percentage+'}'
      },
      textStyle:{
        rich:{
            a:{
              width: 35,
              fontSize:14,
              color:'#333',
              align:'center',
              verticalAlign: 'middle'
            },
            b:{
              fontSize:16,
              color:'#333',
              align:'center',
              verticalAlign: 'middle',
              padding:[0,0,0,15],
              fontWeight: 700,
            }
        }
      }
    },
    grid: {
      top: 5,
    },
    series: [
      {
        type: 'pie',
        radius: ['65%', '80%'],
        center: ['26%', '45%'],
        color,
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'center',
          formatter: text
        },
        data
      }
    ]
  }

  onMounted(() => {
    setOptions(option)
  })
</script>

<style lang="less" scoped>
.data-report-pie{
  :deep(.formatter-title){
    margin: 0 0 0 10px;
    span{
      width: 12px !important;
      height: 12px !important;
      border-radius: 2px !important;
    }
  }
  :deep(.formatter-div){
    margin: 0 10px;
    color: #333;
    display: flex;
    .percentage{
      margin-left: 15px;
      width: 50px;
      font-weight: bold;
      margin-bottom: 6px;
    }
    .people{
      width: 45px;
      font-weight: bold;
      text-align: left;
    }
  }
}
</style>